<template>
  <div>
      <div class="goods" >
        <div class="menu-wrapper" >
          <ul>
            <!--类名current 标准当前分类 当前下标等于currentIndex，那就为true-->
            <li class="menu-item"
                v-for="(good, index) of goods"
                :key="index"
                :class="{current: index === currentIndex}"
                @click="currentClick(index)"
            ><!--currentClick(index)要传index 要不然不知道点击的是哪一个，传个参数获取当前-->
              <span class="text  bottom-border-1px">
                <img class="icon" :src="good.icon" v-if="good.icon">
                {{good.name}}
              </span>
            </li>
          </ul>
        </div>
        <div class="foods-wrapper">
          <ul ref="foodsUl">
            <li class="food-list-hook"  v-for="(good, index) of goods" :key="index">
              <h1 class="title">{{good.name}}</h1>
              <ul >
                <li class="food-item bottom-border-1px" v-for="(food, index) of good.foods" :key="index"  @click="showFood(food)">
                  <div class="icon">
                    <img width="57" height="57" :src="food.icon"/>
                  </div>
                  <div class="content">
                    <h2 class="name">{{food.name}}</h2>
                    <p class="desc">{{food.description}}</p>
                    <div class="extra">
                      <span class="count">月售{{food.sellCount}}份</span>
                      <span>好评率{{food.rating}}%</span>
                    </div>
                    <div class="price">
                      <span class="now">￥{{food.price}}</span>
                      <span class="old" v-if="food.oldPrice">￥{{food.oldPrice}}</span>
                    </div>
                    <div class="cartcontrol-wrapper">
                      <cart-control :food="food"/>
                    </div>
                  </div>
                </li>
              </ul>
            </li>
          </ul>
        </div>
        <shop-cart/>
      </div>
      <food :food="food" ref="food" />
    </div>
</template>

<script>
import {mapState} from 'vuex'
import BScroll from 'better-scroll'
import CartControl from '@/components/cartcontrol/CartControl'
import Food from '@/components/food/Food'
import ShopCart from '@/components/shopcart/ShopCart'
export default {
  name: 'ShopGoods',
  components: {
    CartControl,
    Food,
    ShopCart
  },
  data () {
    return {
      food: {}, // 需要显示的food Food的内容
      scrollY: 0, // 右侧滑动的Y轴坐标（滑动过程中实时变化）
      tops: [] // 所有右侧分类li的top组成的数据（列表第一次显示后就不再变化）
    }
  },
  mounted () {
    // actions中调方法; 调数据的时候，同步之后在执行异步
    this.$store.dispatch('getShopGoods', () => { // 列表数据更新后执行
      this.$nextTick(() => { // vue的回调函数 列表数据更新显示后执行，Vue.nextTick用于延迟执行一段代码，它接受2个参数（回调函数和执行回调函数）
        this._initScroll()
        this._initTops()
      })
    })
  },
  computed: {
    ...mapState(['goods']), // 调数据
    // 计算得到当前分类的下标
    currentIndex () { // 初始和相关数据发生变化之后执行
      // 得到条件数据
      const {scrollY, tops} = this
      // 根据条件计算产生一个结果,寻找下标
      const index = tops.findIndex((top, index) => {
        // scrollY >= 当前top && scrollY < 下一个top
        return scrollY >= top && scrollY < tops[index + 1]
      })
      // 返回结果
      return index
    }
  },
  methods: {
    // 初始化滚动，mounted中调用
    _initScroll () {
      this.scroll = new BScroll('.menu-wrapper', { // 列表显示之后创建BScroll
        click: true
      })
      this.foodScroll = new BScroll('.foods-wrapper', { // 列表显示之后创建BScroll
        probeType: 2, // 因为惯性滑动不会触发，默认0为不触发 2慢一点的 3滑动的的多
        click: true // 不写的话点击事件click没法触发
      })
      // 给右侧列表绑定scroll开始的监听
      this.foodScroll.on('scroll', ({x, y}) => {
        console.log(x, y)
        this.scrollY = Math.abs(y) // Math.abs('-1') ==1; Math.abs(-2);== 2；
      })
      // 给右侧列表绑定scroll结束的监听
      this.foodScroll.on('scrollEnd', ({x, y}) => {
        console.log('scrollEnd', x, y)
        this.scrollY = Math.abs(y) // Math.abs() 是 Math 中的一个静态方法
      })
    },
    // 初始化tops
    _initTops () {
      // 1、初始化tops
      const tops = []
      let top = 0
      tops.push(top)
      // 2、收集
      // 找到所有分类的li
      //  const lis = this.$refs.foodsUl.children() // 俩种方法都可以getElementsByClassName
      const list = this.$refs.foodsUl.getElementsByClassName('food-list-hook')
      console.log(list)
      console.log(list.length)// 0
      Array.prototype.slice.call(list).forEach(li => { // array.prototype.slice 是原型slice 方法，Array.prototype:数组方法;call:传递给调用函数的参数是逐个列出的
        top += li.clientHeight // 元素客户区的大小，指的是元素内容及其边框所占据的空间大小（经过实践取出来的大多是视口大小）
        tops.push(top)
      })
      // 3、更新数据
      this.tops = tops
      console.log(tops)
    },
    currentClick (index) {
      console.log(index)
      // 是右侧列表滑动到对应的位置
      const y = this.tops[index] // 得到目标位置的scrollY，
      this.scrollY = y // 解决当前点击延迟变色，立即更新点击分类项成为当前的分类
      this.foodScroll.scrollTo(0, -y, 300) // 300代表time时间 0代表x轴 scrollY代表y轴 平滑滚动右侧列表，因为滚动的都是负值所以加个-
    },
    // 显示点击后的food
    showFood (food) {
      // 设置food
      this.food = food
      // 显示food组件(在父组件中调用子组件的方法）
      this.$refs.food.toggleShow()
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import "../../../common/stylus/mixins.styl"
  .goods
    display  flex
    position: absolute
    top: 395px
    bottom: 90px
    width: 100%
    background: #fff;
    overflow: hidden
    .menu-wrapper
      flex: 0 0 160px
      width 160px
      background #f3f5f7
      .menu-item
        display: table
        height: 108px
        width: 112px
        padding: 0 24px
        line-height: 28px
        &.current
          position: relative
          z-index: 10
          margin-top: -2px
          background: #fff
          color: $green
          font-weight: 700
          .text
            border-none()
        .icon
          display: inline-block
          vertical-align: top
          width: 24px
          height: 24px
          margin-right: 4px
          background-size: 24px 24px
          background-repeat: no-repeat
        .text
          display: table-cell
          width: 112px
          vertical-align: middle
          bottom-border-1px(rgba(7, 17, 27, 0.1))
          font-size: 24px
  .foods-wrapper
    flex: 1
    .title
      padding-left: 28px
      height: 52px
      line-height: 52px
      border-left: 4px solid #d9dde1
      font-size: 24px
      color: rgb(147, 153, 159)
      background: #f3f5f7
    .food-item
      display: flex
      margin: 36px
      padding-bottom: 36px
      bottom-border-1px(rgba(7, 17, 27, 0.1))
      &:last-child
        border-none()
        margin-bottom: 0
      .icon
        flex: 0 0 114px
        margin-right: 20px
      .content
        flex: 1
        .name
          margin: 4px 0 16px 0
          height: 28px
          line-height: 28px
          font-size: 28px
          color: rgb(7, 17, 27)
        .desc, .extra
          line-height: 20px
          font-size: 20px
          color: rgb(147, 153, 159)
        .desc
          line-height: 24px
          margin-bottom: 16px
        .extra
          .count
            margin-right: 24px
        .price
          font-weight: 700
          line-height: 48px
          .now
            margin-right: 16px
            font-size: 28px
            color: rgb(240, 20, 20)
          .old
            text-decoration: line-through
            font-size: 20px
            color: rgb(147, 153, 159)
        .cartcontrol-wrapper
          position: absolute
          right: 0
          bottom: 24px
</style>
